<template>
	<!--地址picker-->
	<view :status="checkStatus" v-if="lotusAddressData.visible" class="lotus-address-mask" @click="close">
		<view :class="lotusAddressData.visible ? 'lotus-address-box' : 'lotus-address-box lotus-address-box-out'" @click.stop>
			<view class="lotus-address-action" style="background: #f2f2f2 !important;" v-if="addressType == 'index'">
				<text @tap="cancel" class="lotus-address-action-cancel cancel">重置</text>
				<text>展览地区</text>
				<text @tap="chosedVal" class="lotus-address-action-affirm confirm">筛选</text>
			</view>
			<view class="lotus-address-action" v-else>
				<text @tap="cancelPicker" class="lotus-address-action-cancel">取消</text>
				<text @tap="chosedVal" class="lotus-address-action-affirm">确认</text>
			</view>
			<view class="lotus-address-picker-box">
				<!--省-->
				<scroll-view scroll-y :scroll-into-view="'pid' + pChoseIndex" class="lotus-address-picker-box-item">
					<view
						@tap="clickPicker(0, pIndex, pItem)"
						:id="'pid' + pIndex"
						:class="pIndex === pChoseIndex ? 'lotus-address-picker lotus-address-picker2' : 'lotus-address-picker'"
						v-for="(pItem, pIndex) in province"
						:key="pIndex"
					>
						{{ pItem }}
					</view>
				</scroll-view>
				<!--市-->
				<scroll-view scroll-y :scroll-into-view="'cid' + cChoseIndex" class="lotus-address-picker-box-item">
					<view
						@tap="clickPicker(1, cIndex, cItem)"
						:id="'cid' + cIndex"
						:class="cIndex === cChoseIndex ? 'lotus-address-picker lotus-address-picker2' : 'lotus-address-picker'"
						v-for="(cItem, cIndex) in city"
						:key="cIndex"
					>
						{{ cItem }}
					</view>
				</scroll-view>
				<!--区-->
				<scroll-view scroll-y :scroll-into-view="'tid' + tChoseIndex" class="lotus-address-picker-box-item">
					<view
						@tap="clickPicker(2, tIndex, tItem)"
						:id="'tid' + tIndex"
						:class="tIndex === tChoseIndex ? 'lotus-address-picker lotus-address-picker2' : 'lotus-address-picker'"
						v-for="(tItem, tIndex) in town"
						:key="tIndex"
					>
						{{ tItem }}
					</view>
				</scroll-view>
				<!--区END-->
			</view>
		</view>
	</view>
	<!--地址picker END-->
</template>

<script>
import { lotusAddressJson } from './Winglau14-lotusAddress.js';
export default {
	props: ['lotusAddressData', 'addressType'],
	data() {
		return {
			visible: false,
			province: [],
			city: [],
			town: [],
			provinceName: '',
			cityName: '',
			townName: '',
			type: 0, //0新增1编辑
			pChoseIndex: -1,
			cChoseIndex: -1,
			tChoseIndex: -1
		};
	},
	mounted() {
		// console.log("打开",this.lotusAddressData);
	},
	methods: {
		close(){
			this.$emit('close');
		},
		// 重置
		cancel() {
			this.$emit('cancel');
		},
		//取消
		cancelPicker() {
			const provinceCode = this.getTarId(this.provinceName);
			const cityCode = this.getTarId(this.cityName);
			const townCode = this.getTarId(this.townName);
			this.visible = false;
			this.$emit('choseVal', {
				province: this.provinceName,
				provinceCode,
				city: this.cityName,
				cityCode,
				town: this.townName,
				townCode,
				isChose: 0,
				visible: false
			});
		},
		//获取最后选择的省市区的值
		chosedVal() {
			this.type = 1;
			const provinceCode = this.getTarId(this.provinceName);
			const cityCode = this.getTarId(this.cityName);
			const townCode = this.getTarId(this.townName);
			this.visible = false;
			let isChose = 0;
			//已选省市区 isChose = 1
			if (this.provinceName || (this.provinceName && this.cityName) || (this.provinceName && this.cityName && this.townName)) {
				isChose = 1;
			}
			this.$emit('choseVal', {
				province: this.provinceName,
				provinceCode,
				city: this.cityName,
				cityCode,
				town: this.townName,
				townCode,
				isChose,
				visible: false
			});
		},
		//获取省市区value
		getTarId(name, type) {
			let id = 0;
			lotusAddressJson.map((item, index) => {
				if (item.name === name) {
					id = item.value;
				}
			});
			return id;
		},
		//获取市数据
		getCityArr(parentId) {
			let city = [];
			lotusAddressJson.map((item, index) => {
				if (item.parent === parentId) {
					city.push(item.name);
				}
			});
			return city;
		},
		//获取区数据
		getTownArr(parentId) {
			let town = [];
			lotusAddressJson.map((item, index) => {
				if (index > 34 && item.parent === parentId) {
					town.push(item.name);
				}
			});
			return town;
		},
		//初始化数据
		initFn() {
			if (!this.province.length) {
				lotusAddressJson.map((item, index) => {
					if (index <= 34) {
						this.province.push(item.name);
					}
				});
			}
			//已选择省市区，高亮显示对应选择省市区
			const p = this._props.lotusAddressData.provinceName;
			const c = this._props.lotusAddressData.cityName;
			const t = this._props.lotusAddressData.townName;
			//已选省
			if (p) {
				this.pChoseIndex = this.getTarIndex(this.province, p);
			}
			//已选市
			if (p && c) {
				const pid = this.getTarId(p);
				this.city = this.getCityArr(pid);
				this.cChoseIndex = this.getTarIndex(this.city, c);
			}
			//已选区
			if (p && c && t) {
				const cid = this.getTarId(c);
				this.town = this.getTownArr(cid);
				this.tChoseIndex = this.getTarIndex(this.town, t);
			}
			//未选省市区
			if (!p && !c && !t) {
				this.pChoseIndex = -1;
				this.cChoseIndex = -1;
				this.tChoseIndex = -1;
				this.city = [];
				this.town = [];
			}
		},
		//获取已选省市区
		getChosedData() {
			const pid = this.getTarId(this.provinceName, 'province');
			this.city = this.getCityArr(pid);
			const cid = this.getTarId(this.cityName, 'city');
			this.town = this.getTownArr(cid);
			//已选省市区获取对应index
			if (this.provinceName) {
				this.pChoseIndex = this.getTarIndex(this.province, this.provinceName);
			}
			if (this.cityName) {
				this.cChoseIndex = this.getTarIndex(this.city, this.cityName);
			}
			if (this.townName) {
				this.tChoseIndex = this.getTarIndex(this.town, this.townName);
			}
		},
		//选择省市区交互
		clickPicker(type, index, name) {
			//省
			if (type === 0) {
				this.pChoseIndex = index;
				this.provinceName = name;
				this.cChoseIndex = -1;
				this.tChoseIndex = -1;
				this.cityName = '';
				this.townName = '';
			}
			//市
			if (type === 1) {
				this.cChoseIndex = index;
				this.cityName = name;
				this.tChoseIndex = -1;
				this.townName = '';
			}
			//区
			if (type === 2) {
				this.tChoseIndex = index;
				this.townName = name;
			}
			//获取省市区数据
			this.getChosedData();
		},
		//获取已选省市区index
		getTarIndex(arr, tarName) {
			let cIndex = 0;
			arr.map((item, index) => {
				if (item === tarName) {
					cIndex = index;
				}
			});
			return cIndex;
		}
	},
	computed: {
		checkStatus() {
			let t = null;
			const _this = this;
			if (!_this.visible) {
				_this.visible = _this._props.lotusAddressData.visible;
				//获取省市区
				_this.provinceName = _this._props.lotusAddressData.provinceName;
				_this.cityName = _this._props.lotusAddressData.cityName;
				_this.townName = _this._props.lotusAddressData.townName;
				//生成初始化数据
				_this.initFn();
				t = _this.visible;
			}
			return t;
		}
	}
};
</script>

<style lang="scss" scoped>
@import './Winglau14-lotusAddress.css';
.cancel {
	border-radius: 30rpx;
	padding: 5rpx 30rpx !important;
	border: 1px solid #bebebe;
	color: #333;
}
.confirm {
	background-color: $color14;
	border-radius: 30rpx;
	padding: 5rpx 30rpx !important;
	color: #fff !important;
}
</style>
